<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
       //  import {reactive,effect} from './reactivity.esm-browser.js'
       import {reactive,effect,ref,toRefs,computed} from './reactivity/index.js'

       console.log('--------------------- reactive/effect ----------------------------')
       
       const obj = reactive({
           name:'pen',
           price: 10,
           number: 5
       })
       let total = 0
       effect(()=>{
         total = obj.price * obj.number
       })
       //  首次加载时会执行 effect 函数，调用箭头函数，箭头函数执行 obj 的 get 方法收集依赖，存储属性和回调函数
       console.log(total)
        // set 触发更新，找到存储的回调函数
       obj.price = 12
       console.log(total)
       obj.number = 100
       console.log(total)

       console.log('--------------------- ref ----------------------------')

       const price = ref(100)
       const count = ref(3)
       let total2 = 0
       effect(()=>{
        total2 = price.value * count.value
       })
       console.log(total2)
       price.value = 12
       console.log(total2)
       count.value = 20
       console.log(total2)

       console.log('--------------------- toRefs ----------------------------')

       const {name,age} = toRefs(reactive({
           name:'xm',
           age:18
       }))
       let info = ''
       effect(()=>{
            info = `name : ${name.value} age：${age.value}`
       })
       console.log(info)
       name.value = 'xh'
       console.log(info)

       console.log('--------------------- computed ----------------------------')
       const prod = reactive({
           name:'pen',
           price: 10,
           number: 5
       })
       const total3 = computed(()=>prod.price*prod.number)
       console.log(total3.value)
       prod.number = 10
       console.log(total3.value)
       // track/trigger/effect 比较底层，一般不会直接调用
    </script>
</body>
</html>
